/*
 * @Description: 车票列表组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:38:45
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-29 20:01:10
 */
<template>
  <div class="ticket_list_main">
    <div
      v-if="!ticketList || ticketList.length < 1"
      class="no_data"
    >
      <p class="fontsize32">所选日期暂无可售班次</p>
    </div>
    <div
      v-else
      class="ticket_list"
    >
      <ticket-item
        v-for="(ticket, index) in ticketList"
        :key="index"
        :ticket="ticket"
        :ticketDateType="ticketDateType"
        :selected="ticketIndex === index"
        @click.native="chooseThisTicket(index)"
      ></ticket-item>
      <div class="no_more fontsize32">没有更多了</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ticketList: [], // 车票数据
      ticketIndex: 0, // 选中车票下标
      ticketDateType: 1 // (日期)类型（1.日票 2.周票 3.月票）
    }
  },
  mounted() {
    // 设定车票信息列表高度，当前页面仅该列表处可以上下滚动
    /* let other = 10.16 * parseFloat(document.querySelector('html').style.fontSize)
    document.querySelector('.ticket_list_main').style.height = document.body.clientHeight - other + 'px' */
  },
  methods: {
    chooseThisTicket(index) {
      // this.ticketIndex = index
      // window.localStorage.setItem('ticket', JSON.stringify(this.ticketList[index]))
      // 余票大于0的处理
      if (this.ticketList[index].HAS_TICKET > 0 && this.ticketIndex !== index) {
        this.ticketIndex = index
        window.localStorage.setItem('ticket', JSON.stringify(this.ticketList[index]))
        this.$parent.$parent.$parent.$refs.choosePopulation.population = 1// 切换时间乘车人数重置为1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ticket_list_main {
  overflow: auto;
  background-color: #fff;
  .no_data {
    color: #999;
    text-align: center;
    margin-top: 32px;
  }
  .ticket_list {
    overflow: auto;
    .no_more {
      color: #999;
      text-align: center;
      padding: 32px 0;
    }
  }
}
</style>
